@import '@automattic/onboarding/styles/mixins';
@import '@wordpress/base-styles/mixins';
@import '@wordpress/base-styles/variables';

$theme-sheet-content-max-width: 1462px;
$theme-sheet-content-padding-x: 20px;
$theme-sheet-content-padding-y: 48px;
$button-border: 4px;

.is-section-theme {
	// overwrite notices z-index so they are visible on top of the theme preview
	.global-notices {
		// This should be - z-index: z-index("root", ".is-section-theme .global-notices")
		// but the @automattic/onboarding/styles/mixins import overwrites the z-index function on client/assets/stylesheets/shared/functions/_z-index.scss
		z-index: 100201;
	}

	&.theme-default.color-scheme {
		--color-surface-backdrop: var( --studio-white );
	}

	.layout.is-logged-in .layout__content {
		overflow: clip;
		padding-top: 47px;

		.theme__sheet-screenshot,
		.theme__sheet-web-preview .theme-preview__frame-wrapper {
			@include breakpoint-deprecated( '>960px' ) {
				max-height: calc(
					100vh - var( --content-padding-top, 0px ) - var( --content-padding-bottom, 0px ) - 32px
				);
			}
		}
	}

	.layout__primary .main {
		@include breakpoint-deprecated( '<960px' ) {
			padding-bottom: 40px;
		}
	}

	.empty-content {
		margin-bottom: 20px;
	}

	&.is-global-sidebar-visible {
		&.layout.is-logged-in .layout__content {
			min-height: 100vh;

			@media screen and ( min-width: 782px ) {
				padding: calc( var( --masterbar-height ) + var( --content-padding-top ) ) 16px
					var( --content-padding-bottom ) var( --sidebar-width-max );
			}
		}

		.layout__primary > * {
			background-color: var( --color-surface );
			border-radius: 8px;
			height: calc(
				100vh - var( --masterbar-height ) - var( --content-padding-top ) - var(
						--content-padding-bottom
					)
			);
			max-width: none;
			overflow-y: auto;
			padding-bottom: 0;

			@include break-small {
				border: 1px solid $gray-200;
			}
		}
	}

	.theme__sheet .navigation-header,
	.theme__sheet .theme__sheet-retired-notice {
		margin: 0 auto;
		max-width: $theme-sheet-content-max-width;
		padding: 24px 44px;

		@media screen and ( min-width: 960px ) {
			padding: 24px 20px;
		}
	}
}

.main.theme__sheet {
	max-width: none;
}

.theme__sheet-bar-soft-launched {
	color: var( --color-warning-80 );
	font-family: $default-font;
	font-size: 0.75rem;
	font-weight: bold;
	text-transform: uppercase;
	background-color: var( --color-warning-20 );
	margin-left: 1rem;
	padding: 2px 4px;
	border-radius: 2px;
}

.button.is-borderless.theme__sheet-back-button {
	color: var( --color-neutral-100 );
	font-size: $font-body-small;
	font-weight: 500;
	line-height: 20px;
	margin-bottom: 24px;
	padding: 0;

	svg {
		display: inline-block;
		height: 20px;
		margin-right: 4px;
		width: 20px;
	}

	@include breakpoint-deprecated( '<960px' ) {
		align-items: center;
		box-shadow: 0 0 0 1px var( --color-neutral-5 );
		box-sizing: border-box;
		display: flex;
		height: 52px;
		margin-bottom: 16px;
		padding: 0 24px;
		width: 100%;

		svg {
			top: 2px;
		}
	}
}

.theme__sheet-columns {
	display: grid;
	gap: 0 32px;
	grid-template-areas:
		'header preview'
		'content preview';
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto 1fr;
	margin: 0 auto;
	max-width: $theme-sheet-content-max-width;
	padding: $theme-sheet-content-padding-y $theme-sheet-content-padding-x;

	@include breakpoint-deprecated( '<960px' ) {
		display: flex;
		gap: 16px;
		flex-direction: column;
		padding-top: 0;
		padding-bottom: 0;

		.theme__sheet-column-left {
			padding: 0 24px;
			order: 2;
		}

		.theme__sheet-column-right {
			order: 1;
		}
	}

	.theme__sheet-demo-button,
	.theme__sheet-preview-demo-site {
		svg {
			vertical-align: text-bottom;
			margin-left: 4px;
			fill: currentColor;
		}
	}

	.theme__sheet-demo-toggle {
		display: flex;
		align-items: center;
		gap: 4px;
	}
}

.theme__sheet-columns.is-removed {
	justify-content: center;
}

.theme__sheet-column-header {
	grid-area: header;
	margin-bottom: 24px;

	@include breakpoint-deprecated( '<960px' ) {
		margin-bottom: 0;
	}

	h2 {
		font-size: $font-body;
		font-weight: 500;
		line-height: 24px;
		margin: 0;
	}

	.theme__sheet-header {
		display: flex;
		flex-direction: column;
		gap: 40px;

		@include breakpoint-deprecated( '<960px' ) {
			gap: 16px;
		}
	}

	.theme__sheet-main {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
		justify-content: space-between;

		@include breakpoint-deprecated( '<960px' ) {
			align-items: flex-start;
			flex-direction: column;
			padding: 0 24px;
		}
	}

	.theme__sheet-main-actions {
		display: flex;
		gap: 10px;

		@include breakpoint-deprecated( '<960px' ) {
			flex-direction: column;
			width: 100%;
		}

		.button {
			border-radius: $button-border;

			@include breakpoint-deprecated( '<960px' ) {
				width: 100%;
			}
		}

		.theme__sheet-primary-button {
			position: relative;
			right: auto;
			top: auto;
			margin-right: 0 !important;
		}
	}

	.theme__sheet-main-info {
		display: flex;
		flex-direction: column;
	}

	.theme__sheet-main-info-title {
		@include onboarding-font-recoleta;
		display: flex;
		flex-direction: column;
		font-size: $font-title-large;
		line-height: 1.2;
		margin: 0;
	}

	.theme__sheet-main-info-type {
		align-self: flex-start;
		margin: 0;
		margin-bottom: 8px;
	}

	.theme__sheet-main-info-tag {
		color: var( --color-neutral-60 );
		font-size: $font-body;
		font-weight: 400;
		line-height: 24px;
	}
}

.theme__sheet-column-left,
.theme__sheet-column-right {
	align-items: flex-start;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: 100%;

	@include breakpoint-deprecated( '<960px' ) {
		width: 100%;
	}
}

.theme__sheet-column-left {
	grid-area: content;
}

.theme__sheet-column-right {
	grid-area: preview;
}

.theme__sheet-primary-button {
	position: absolute;
	top: 5px;
	right: 50%;
	margin-right: 20px !important;

	.theme__sheet-badge-beta {
		background-color: var( --color-surface );
		margin-left: 10px;
	}

	@include breakpoint-deprecated( '<960px' ) {
		margin-right: 0;
		position: absolute;
		top: 5px;
		right: 5px;
	}
}

.theme__sheet-customize-button {
	.gridicon {
		margin-right: 4px;
	}
	&.spin {
		.gridicons-sync > use:first-child,
		.gridicons-sync > g:first-child {
			animation: spinning-sync-icon linear 2s infinite;
			transform-origin: center;
		}
	}
}

@keyframes spinning-sync-icon {
	from {
		transform: rotate( 0deg );
	}
	to {
		transform: rotate( 360deg );
	}
}

.theme__sheet-button-placeholder {
	color: transparent;
}

.theme__sheet-preview-nav-item {
	margin-left: auto;

	@include breakpoint-deprecated( '<960px' ) {
		display: none;
	}
}

.theme__sheet-action-bar-cost {
	font-weight: 600;
	color: #4ab866;
	display: inline-block;
}

.theme__sheet-action-bar-cost-upgrade {
	text-transform: uppercase;
	font-size: 90%;
}

.theme__sheet-web-preview {
	$iframe-viewport-height: 1040px;
	$iframe-viewport-height-scaled: calc( $iframe-viewport-height / 2 );
	min-height: $iframe-viewport-height-scaled;

	.theme-preview__frame-wrapper {
		max-height: 100vw;
		pointer-events: none;

		.theme-preview__frame {
			max-height: 100%;
		}

		@include breakpoint-deprecated( '>960px' ) {
			max-height: calc( 100vh - var( --masterbar-height ) );

			.theme-preview__frame {
				height: 200%;
				max-height: 200%;
				max-width: 200%;
				min-height: $iframe-viewport-height-scaled;
				transform: scale( 0.5 ) !important;
				width: 200%;
			}
		}
	}

	&.is-clickable {
		cursor: pointer;

		&:hover,
		&:focus {
			.theme-preview__frame-wrapper {
				opacity: 0.8;
			}
		}
	}

	.theme-preview__container {
		position: relative;
	}

	.theme-preview__frame {
		transform: none !important;
	}
}

.theme__sheet-screenshot {
	&:hover,
	&:focus {
		.theme__sheet-img {
			opacity: 0.8;
		}
	}
}

@keyframes theme__sheet-preview-demo-site {
	0% {
		transform: translate( -50%, 10px );
	}
}

.theme__sheet-web-preview,
.theme__sheet-screenshot {
	background-color: transparentize( rgb( 255, 255, 255 ), 0.5 );
	border-radius: 8px;
	box-shadow:
		0 6px 10px rgba( 0, 0, 0, 0.14 ),
		0 1px 18px rgba( 0, 0, 0, 0.12 ),
		0 3px 5px rgba( 0, 0, 0, 0.2 );
	display: block;
	margin-bottom: 16px;
	margin-top: 0;
	overflow: hidden;
	transition: all 200ms ease-in-out;
	width: 98%;
	z-index: 1;

	&:hover,
	&:focus {
		.theme__sheet-preview-demo-site {
			opacity: 1;
			animation: theme__sheet-preview-demo-site 150ms ease-in-out;
		}
	}

	@include breakpoint-deprecated( '<960px' ) {
		border-radius: 0;
		box-shadow: none;
		position: relative;
		max-height: 100vw;
		overflow: hidden;
		margin-top: 0;
		top: 0;
		width: 100%;

		&::before {
			content: '';
			display: block;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 30%;
			background: linear-gradient(
				to bottom,
				transparent 0,
				color-mix( in srgb, var( --color-neutral-0 ) 50%, transparent ) 40%,
				var( --color-neutral-0 ) 93%
			);
		}
	}

	@include breakpoint-deprecated( '>960px' ) {
		overflow-y: scroll;
		pointer-events: all;
		position: sticky;
		top: $theme-sheet-content-padding-y;

		.is-global-sidebar-visible & {
			top: 16px;
		}

		&.is-active:hover {
			cursor: pointer;
			box-shadow:
				0 0 0 1px var( --color-neutral-light ),
				0 2px 10px 0 color-mix( in srgb, var( --color-neutral-dark ) 50%, transparent );
		}
	}
}

.theme__sheet-preview-demo-site {
	$button-height: 40px;

	height: $button-height;
	opacity: 0;
	position: sticky;
	left: 50%;
	top: 50%;
	z-index: 1;
	transform: translate( -50%, 0 );

	&.button {
		border-radius: $button-border;
	}

	+ .theme__sheet-img,
	+ .theme-preview__container {
		margin-top: -$button-height;
	}
}

.theme__sheet-img {
	display: block;
	width: 100%;
}

.theme__sheet-preview-link {
	display: none;
	position: absolute;
	margin: 0 auto;
	padding: 10px;
	color: var( --color-primary );
	font-size: $font-body-small;
	cursor: pointer;
	transition: all ease-in-out 100ms;

	&:hover {
		color: var( --color-accent );
	}

	.theme__sheet-preview-link-text {
		margin-top: 2px;
	}

	@include breakpoint-deprecated( '<960px' ) {
		display: flex;
		top: auto;
		bottom: -10px;
		left: 0;
		right: 0;

		.theme__sheet-preview-link-text {
			margin: 0 auto;
			padding: 2px 8px 3px;
			background-color: var( --color-neutral-0 );
			color: var( --color-text-subtle );
			font-size: $font-body-extra-small;
			font-weight: 600;
			border-radius: 2px;
			border: 1px solid var( --color-neutral-5 );
		}
	}
}

.theme__sheet-content {
	&.card {
		box-shadow: none;
		font-size: 1rem;
		min-height: auto;
		padding: 0;
	}

	div {
		width: auto !important; // override inline style in content markup
	}

	.banner__icon-circle {
		width: 24px !important;
	}

	p:last-child {
		margin-bottom: 0;
	}

	img {
		&.aligncenter {
			max-width: 100%;
			display: block;
			margin: 20px auto;
			border: 1px solid var( --color-neutral-0 );
		}

		&.alignright,
		&.alignleft {
			max-width: 100%;
			margin: 7px 0 20px;
		}

		&.alignright {
			float: right;
			margin-left: 20px;
		}

		&.alignleft {
			float: left;
			margin-right: 20px;
		}
	}

	.wp-caption {
		border: 1px solid var( --color-neutral-0 );
		background-color: var( --color-neutral-0 );
		margin-bottom: 20px;
	}

	.wp-caption-text {
		color: var( --color-neutral-50 );
		font-size: $font-body-extra-small;
		padding: 3px 8px 6px;
	}

	h2,
	.theme__sheet-features .section-header__label {
		border: 0;
		color: var( --color-neutral-100 );
		font-size: $font-body;
		font-weight: 500;
		line-height: 24px;
		margin: 40px 0 12px 0;
		padding: 0;
	}

	h2 {
		font-size: 1.25rem;
	}

	h3 {
		font-size: $font-title-small;
		font-weight: 400;
		margin: 40px 0 10px;
	}

	h4 {
		font-size: $font-title-small;
		font-weight: 400;
		margin: 40px 0 10px;
	}

	h5 {
		font-size: $font-body;
		font-weight: 400;
		margin: 40px 0 10px;
	}

	h6 {
		font-size: $font-body-small;
		font-weight: 400;
		margin: 40px 0 10px;
	}

	pre {
		font-family: $code;
		font-size: $font-body-small;
		white-space: pre-wrap;
		padding: 8px;
	}

	code {
		font-size: $font-body-small;
		background: var( --color-neutral-0 );
		padding: 1px 4px;
		border-radius: 2px;
	}

	blockquote {
		padding: 30px;
		margin: 0 -20px;
		border-left: 2px solid var( --color-neutral-light );
	}

	video {
		height: auto;
		max-width: 100%;
	}

	.notes {
		background: transparent;
		border: 0;
		margin: 0;
		border-top: 1px solid #e9eff3;
		border-bottom: 1px solid #e9eff3;
		padding: 0;

		font-size: $font-body-small;
		line-height: 21px;

		& > p:first-child {
			color: var( --color-neutral-light );
			font-weight: 600;
			margin: 0 0 14px;
		}

		ol {
			margin-left: 20px;
		}

		code {
			font-size: $font-body-extra-small;
			background: #fff;
			padding: 2px 4px;
			border-radius: 2px;
		}

		:last-child {
			margin-bottom: 5px;
		}

		&:last-child {
			margin-bottom: -20px;
			border-bottom: 0;
		}
	}
}

.theme__sheet-placeholder {
	color: transparent;
	background-color: rgba( 255, 255, 255, 0.4 );
	animation: loading-fade 1.6s ease-in-out infinite;
}

.theme__sheet-features {
	margin-bottom: 24px;

	.card {
		box-shadow: none;
		padding: 0;
	}
}

.theme__sheet-features-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	text-align: left;

	a,
	span {
		display: inline-block;
		position: relative;
		background-color: var( --color-neutral-5 );
		border-radius: $button-border;
		color: var( --color-neutral-80 );
		margin: 0;
		padding: 2px 10px;
		transition: all 100ms ease-in;

		&:hover {
			color: var( --color-text-inverted );
			background-color: var( --color-primary-dark );

			&::after {
				transform: scale( 1.07, 1.16 );
			}
		}
	}

	li {
		list-style: none;
		display: inline-block;
		position: relative;
		z-index: 0;
	}
}

.theme__sheet-footer-line {
	color: var( --color-neutral-10 );
	border-top: 1px solid var( --color-neutral-10 );
	margin: 32px 0 20px;

	.gridicon {
		display: block;
		margin: -12px auto 0;
		background: var( --color-neutral-0 );
	}
}

.theme__sheet-content-presentation-image {
	// This is used in conjunction with the theme content output.
	// NOT to be used anywhere in Calypso UI.
	display: none;
}

.banner.card {
	&.theme__page-upsell-banner {
		background-color: #f0f7fc;
		border: 0;
		border-radius: $button-border;
		box-shadow: none;
		margin-bottom: 24px;
		padding: 24px 30px;
		width: 100%;

		.banner__icon-circle {
			background-color: var( --studio-blue-50 );
		}
	}

	&.theme__page-upsell-disabled {
		pointer-events: none;
		opacity: 0.5;
	}

	&.theme__preview-upsell-banner {
		@include banner-dark();
		width: 100%;
		margin: 0;
		text-decoration: none;
	}
}
.theme__sheet-reviews-summary {
	@include breakpoint-deprecated( '<960px' ) {
		padding-left: 1.5rem;
	}
}
